<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章分类</title>
    <div th:replace="common-2::menu"></div>
</head>
<body class="m-body">
    <!--头部导航-->
    <div th:replace="common-2::headermenu(2)"></div>

    <!--中间内容-->
    <div class="m-container m-padded-tb-big animate__animated animate__jackInTheBox">
        <div class="ui container">
            <!--header-->
            <div class="ui top attached segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui teal header">分类</h3>
                    </div>
                    <div class="right aligned column">
                        共 <h2 class="ui orange header m-inline-block m-text-thin">[[${typeCount}]]</h2> 个
                    </div>
                </div>
            </div>

            <!--分类列表-->
            <div class="ui bottom attached segment m-padded-tb-large m-padded-rl-large">
                <div class="ui stackable labeled button m-margin-tb-tiny m-margin-rl-small" th:each="type:${types}">
                    <a th:href="@{/type(id=${type.id})}" class="ui basic button" th:classappend="${typeId==type.id} ? 'teal'" th:text="${type.name}">认知升级</a>
                    <div class="ui basic left pointing label" th:classappend="${typeId==type.id} ? 'teal'" th:text="${type.count}">12</div>
                </div>
            </div>

            <div th:styleappend="${pageInfo.size<3} ? 'height: 700px'">
                <div class="ui top attached teal segment">

                <div class="ui stackable segment m-padded-tb m-padded-rl m-margin-b-large" th:if="${pageInfo.total==0}">
                    <div style="height: 500px;text-align: center">
                        <p class="m-text-style">——TOTALY 0 POSTS——</p>
                        <p class="m-text-thin m-padded-tb-large" style="font-size: 16px">这里空空如也</p>
                        <p class="m-text-thin" style="font-size: 16px">你再找找其他试试看吧..</p>
                    </div>
                </div>

                <div class="ui stackable segment m-padded-tb m-padded-rl m-margin-b-large" th:each="blog:${pageInfo.list}">
                    <div class="column">
                        <h3 class="ui header"><a th:href="@{/blog(id=${blog.id})}" th:text="${blog.title}" style="color: black">黑暗森林法则</a></h3>
                        <p class="m-text" th:text="${#strings.abbreviate(blog.content,200)}">黑暗森林法则 ：一旦某个文明被发现，就必然遭到其他文明的打击。 点评 ：一旦被发现，能生存下来的是只有一方，或者都不能生存。 解析：可以从地球中的 国家 间文明发展，以小看大分析宇宙文明发展方向。 宇宙就是一座黑暗森林，每个文明都是带枪的猎人，像幽灵般潜行于林间，轻轻拨开挡路的树枝，竭力不让脚步发出一点儿声音，连呼吸都必须小心翼翼......</p>
                        <div class="ui stackable grid">
                            <div class="twelve wide column">
                                <div class="ui horizontal link list">
                                    <div class="item">
                                        <img th:src="${blog.user.avatar}" width="100px" height="100px" class="ui avatar image">
                                        <div class="content">
                                            <div style="color: #868e96" class="header" th:text="${blog.user.nickname}">志千</div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i> [[${#dates.format(blog.createTime,'yyyy-MM-dd')}]]
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i>[[${blog.views}]]
                                    </div>
                                </div>
                            </div>
                            <div class="right aligned three wide column">
                                <a th:href="@{/type(id=${blog.type.id})}" target="_blank" class="ui teal basic label m-padded-mini" th:text="${blog.type.name}">认知升级</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

                <!--footer-->
                <div class="ui bottom attached segment" th:if="${pageInfo.total>pageInfo.pageSize}">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a th:href="@{/type(id=${pageInfo.list.get(0).type.id},pageNum=${pageInfo.pageNum}-1)}" class="ui mini teal basic button" th:if="${pageInfo.hasPreviousPage}">上一页</a>
                        </div>
                        <div class="right aligned column" th:if="${pageInfo.hasNextPage}">
                            <a th:href="@{/type(id=${pageInfo.list.get(0).type.id},pageNum=${pageInfo.pageNum}+1)}" class="ui mini teal basic button">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!--底部footer-->
    <div th:replace="common-2::footermenu"></div>
    <!--script-->
    <div th:replace="common-2::scriptmenu"></div>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $(".m-item").toggleClass('m-mobile-hide');
            })
        })
    </script>
</body>
</html>